<!-- 收藏 -->
<template>
	<view class="collect">
		<!-- 搜索栏 -->
		<u-sticky offset-top="-88rpx">
			<view class="searchBar">
				<u-icon name="arrow-left" size="22" @click="gotoBack"></u-icon>
				<u-search class="searchInput" placeholder="搜索收藏内容" v-model="searchValue" shape="square"
					:showAction="false">
				</u-search>
			</view>
			<u-tabs :list="list" lineWidth="30" lineColor="#f56c6c" @click="click" current='1'
				:activeStyle="{ color: '#303133', fontWeight: 'bold', transform: 'scale(1.05)' }"
				:inactiveStyle="{ color: '#606266', transform: 'scale(1)' }"
				itemStyle="padding-left: 30rpx; padding-right: 30rpx; height: 68rpx;"></u-tabs>
		</u-sticky>
		<u-line color="#f2f2f2"></u-line>
		<u-row class="classRecommend" align="top" v-if="isShow">
			<view class="item" v-for="item,index in classList" :key="index">
				<u-col>
					<img :src="item.thumb" alt="" width="100%">
					<text class="u-line-2">{{item.name}}</text>
				</u-col>
			</view>
		</u-row>
		<u-empty v-else style="margin-top: 12vh;" mode="data" text="暂无内容"
			icon="http://cdn.uviewui.com/uview/empty/data.png">
		</u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				list: [{
					name: '食物',
				}, {
					name: '课程',
				}, {
					name: '电影'
				}, {
					name: '食单'
				}, {
					name: '问答'
				}, {
					name: '文章'
				}],
				isShow: true,
				classList: [{
					name: '3款家常千层肉饼（猪肉大葱/香嫩牛肉/韭菜鸡蛋）',
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
				}, {
					name: '3款家常千层肉饼（猪肉大葱/香嫩牛肉/韭菜鸡蛋）',
					thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
				}, {
					name: '3款家常千层肉饼（猪肉大葱/香嫩牛肉/韭菜鸡蛋）',
					thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
				}, {
					name: '3款家常千层肉饼（猪肉大葱/香嫩牛肉/韭菜鸡蛋）',
					thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
				}, {
					name: '3款家常千层肉饼（猪肉大葱/香嫩牛肉/韭菜鸡蛋）',
					thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
				}],
			};
		},
		methods: {
			// 返回
			gotoBack() {
				uni.navigateBack()
			},
			// 
			click(item) {
				this.isShow = item.name === '课程'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.collect {
		.u-sticky {
			background-color: #fff !important;

			.searchBar {
				display: flex;
				justify-content: space-around;
				padding: 20rpx 110rpx 20rpx 20rpx;
				align-items: center;

				.searchInput {
					width: 525rpx;
					flex: unset;
				}
			}
		}

		.u-tabs {
			align-items: center;
		}

		.classRecommend {
			margin-top: 10rpx;
			flex-wrap: wrap;

			.item {
				width: 46%;
				margin: 10rpx 10rpx 10rpx 16rpx;
				border-radius: 10rpx;
				overflow: hidden;

				.u-line-2 {
					font-size: 28rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>
